<template>
  <div id="photolist">
    <div class="category-wraper">
        <ul class="category-list">
            <router-link :to="{name:'photoinfo',params:{id:item.id}}" tag="li" class="category-item" v-for="item in titlelist" :key="item.id">{{item.title}}</router-link>
        </ul>
    </div>
    <div class="photo-wraper">
        <router-view></router-view>
    </div>
  </div>
</template>

<script>

import common  from "../../kits/common.js"
import axios from "axios"
import { Toast } from 'mint-ui';

export default {
  name: 'photolist',
  data() {
      return {
        titlelist:[]
      }
  },
  methods: {
      getphoto(cateid){
        axios.get( common.apidomain + "/api/getimages/:" + cateid )
        .then(response=>{
            if(response.data.status != 0 ) {
                Toast(response.data.message)
            };
            this.photolist = response.data.message
        })
      }
  },
  created() {
    //   获取图片分类信息
      axios.get(common.apidomain+"/api/getimgcategory")
      .then(response=>{
        if(response.data.status != 0){
            Toast(response.data.message)
        };
        this.titlelist = response.data.message    
      })
  }
}
</script>

<style lang="less">
    #photolist {
        width: 100%;
        padding: 50px 0;
        .category-wraper {
            width:100%;
            overflow-x: auto;
            .category-list {
                width: 1000px;
                .category-item {
                    display: inline-block;
                    padding: 5px 3px;
                }    
            }
        }
    }
</style>

